/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 登录页
*/
<template>
	<view class="login-content" :style="{'height': allHeight}">
		<view class="a-swiper-dot">
			<view class="title-box text-xl padding">
				<text class="text-black text-bold text-color">贾汪区入河排污口动态管理平台</text>
			</view>
			<!-- <scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index == TabCur?'text-blue' : 'text-white'" v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.name }}
					</view>
				</view>
			</scroll-view> -->
			<view> <!-- v-if="TabCur == 0"-->
				<view class="padding-xs text-xxl text-bold content-input">
					<input v-model="loginForm.username"  type="text" class="user-input cuIcon-myfill"/>
					<input v-model="loginForm.password" type="text" :password="showPassword" class="user-input cuIcon-lock margin-t-60upx"/>
				</view>
				<view class="padding-xs text-lg">
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="goHomePage" :disabled="disabledStatus">
						<text class="cuIcon-loading2 cuIconfont-spin" v-if="disabledStatus"></text>
						登录
					</button>
				</view>
			</view>
			<!-- <view v-if="TabCur == 1">
				<view class="padding-xs text-xxl text-bold content-input">
					<input v-model="registered.user"  type="text" class="user-input cuIcon-people"/>
					<input v-model="registered.password1" type="text" :password="showPassword" class="user-input cuIcon-lock margin-t-60upx"/>
					<input v-model="registered.password2" type="text" :password="showPassword" class="user-input cuIcon-unlock margin-t-60upx"/>
				</view>
				<view class="padding-xs text-lg">
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="goHomePage" :disabled="disabledStatus">
						<text class="cuIcon-loading2 cuIconfont-spin" v-if="disabledStatus"></text>
						确定
					</button>
				</view>
			</view> -->
		</view>
		<text class="footer-text">技术支持：我自己</text>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { setCidAp } from '@/api/user' // getRegistered
	export default {
		data() {
			return {
				TabCur: 0, // 样式配置
				scrollLeft: 0, // 滚动
				allHeight: 0, // 页面背景高度
				loginForm: { // 登录账户密码提交字段
					username: '',
					password: '',
					grant_type: 'password'
				},
				showPassword: true, // 是否显示密码
				disabledStatus: false, // 请求状态
				tabs: [], // tabs
				registered: {
					user: '',
					password1: '',
					password2: ''
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapMutations(['USER_LOGIN']),
			// 进入页面初始化页面高度
			init () {
				const _THIS = this
				uni.getSystemInfo({
					success(res) {
						_THIS.allHeight = (res.screenHeight * 2) + 66 + 'upx'
					}
				})
				// 获取注册开关 0 打开  1 关闭 （IOS专用）
				// getRegistered().then(res => {
				// 	if (res.data.code === 0) {
				// 		this.tabs.push({type: 0, name: '登录'}, {type: 1, name: '注册'})
				// 	} else {
				// 		this.tabs = []
				// 	}
				// }).catch(err => { console.log(err) })
			},
			// 登录
			goHomePage () {
				uni.switchTab({
					url: '../home/index'
				})
				// if (!this.loginForm.username) {
				// 	uni.showToast({
				// 		title: '用户名不能为空',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// } else if (!this.loginForm.password) {
				// 	uni.showToast({
				// 		title: '密码不能为空',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				// this.disabledStatus = true
				
				// uni.request({
				//     url: uni.getStorageSync('BaseUrl') + 'auth/oauth/token', 
				//     data: this.loginForm,
				// 	method: 'POST',
				// 	dataType: 'json',
				//     header: {
				// 		'Content-type': 'application/x-www-form-urlencoded',
				//         'Authorization': 'Basic aGpfYXBwOmhqX2FwcA==' //自定义请求头信息
				//     }, success: (res) => {
				// 		if (res.data.code === 0) {
				// 			this.USER_LOGIN(res.data) // 储存登录有的用户信息
				// 			uni.showToast({
				// 				title: '登录成功',
				// 				icon: 'none',
				// 				duration: 2000
				// 			})
				// 			uni.navigateTo({
				// 				url: '../home/index'
				// 			})
				// 			this.setCidFun()
				// 		} else {
				// 			uni.showToast({
				// 				title: res.data.msg,
				// 				icon: 'none',
				// 				duration: 2000
				// 			})
				// 			this.disabledStatus = false
				// 		}
				//     }
				// })
			},
			// tabs
			// tabSelect(e) {
			// 	console.log(this.TabCur, '上页')
			// 	this.TabCur = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// },
			// 提交CID
			setCidFun () {
				let clientid = uni.getStorageSync('clientid')
				setCidApi(clientid).then(res => {
					console.log(res, 'cid提交成功')
				}).catch(err => { console.log(err) })
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-content {
		width: 100%;
		height: 100%;
		background: url(../../static/timg.jpg) no-repeat center;
		background-size: 100% 100%;
		overflow: hidden;
		position: relative;
		.a-swiper-dot {
			padding: 35% 5% 0;
			.title-box {
				.text-color {
					color: $uni-text-color-inverse;
					text-align: center;
					display: block;
				}
			}
			.content-input {
				.user-input {
					display: block;
					position: relative;
					border: 2upx solid $uni-text-color-inverse;
					color: $uni-text-color-inverse;
					font-size: 28upx;
					line-height: auto;
					height: auto;
					max-height: auto;
					&::before {
						position: absolute;
						left: 10upx;
						top: 16upx;
						font-size: 32upx;
					}
					/deep/ .uni-input-placeholder {
						left: 35upx;
					}
					/deep/ .uni-input-input {
						padding: 20upx 50upx 20upx;
						color: $uni-text-color-inverse;
					}
				}
			}
			.registerd {
				display: block;
				color: #FFFFFF;
				text-align: center;
			}
		}
		.footer-text {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			text-align: center;
			color: $uni-text-color-inverse;
			padding: 0 0 30upx;
		}
	}
</style>
